<template>
  <div>
    <Card class="ivu-mt" dis-hover :bordered="false">
    <Table :columns="columns" :data="logPage" :loading="loading">
        <template slot="status" slot-scope="{row}">
            <Badge v-if="row.status ===0" status="success" text="成功"></Badge>
            <Badge v-if="row.status ===1" status="error" text="失败"></Badge>
        </template>
        <template slot="operation" slot-scope="{row}">
           <a>{{row.operation}}</a>
        </template>
    </Table>
            <div class="ivu-mt ivu-text-center">
            <Page :total="listData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
          </Card>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: '记录ID',
                        key: 'id'
                    },
                    {
                        title: '操作人',
                        key: 'person'
                    },
                    {
                        title: '开始时间',
                        key: 'startTime',
                        width: 165
                    },
                    {
                        title: '结束时间',
                        key: 'endTime',
                        width: 165
                    },
                    {
                        title: '状态',
                        key: 'status',
                        slot: 'status'
                    },
                    {
                        title: '模块',
                        key: 'modular'
                    },
                    {
                        title: '已处理记录',
                        key: 'processed'
                    },
                    {
                        title: '已失败记录',
                        key: 'fail'
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        slot: 'operation'
                    }
                ],
                list: [],
                current: 1,
                size: 10,
                loading: false
            }
        },
        computed: {
            listData () {
                let data = [...this.list]
                return data;
            },
            logPage () {
                const data = this.listData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end)
            }
        },
        methods: {
            mockOneData () {
                const item = {};
                item.id = '100001';
                item.person = '张雨';
                item.startTime = '16/06/2020 17:31:39';
                item.endTime = '16/06/2020 17:31:40';
                item.status = Math.floor((Math.random() * 2));
                item.modular = '患者';
                item.processed = '1658';
                item.fail = '3';
                item.operation = '下载'
                return item
            },
            getData () {
                this.current = 1;
                this.loading = true;
                setTimeout(() => {
                    let data = [];
                    for (let i = 0; i < 100; i++) {
                        data.push(this.mockOneData());
                    }
                    this.list = data;
                    this.loading = false;
                }, 1000)
            }
        },
        mounted () {
            this.getData()
        }
    }
</script>
